<template>
    <div class="year-tags">
        <span class="year-tags-label">年份：</span>
        <span class="year-tags-item" v-for="item in years" :class="{ active: item == currentYear }"
            @click="onSelectYear(item)">{{
                item
            }}</span>
    </div>
</template>

<script setup>
const currentYear = ref('全部')
const now = new Date()
const years = ref(['全部'])
let nowYear = now.getFullYear()

for (let i = 0; i < 4; i++) {
    years.value.push(nowYear)
    nowYear--
}

const emit = defineEmits(['change'])

function onSelectYear(item) {
    currentYear.value = item
    emit('change', item)
}

</script>
<style scoped lang="scss">
.year-tags {
    font-size: 16px;
    margin-bottom: 50px;

    .year-tags-label {
        margin-right: 34px;
        color: #333;
    }

    .year-tags-item {
        margin-right: 36px;
        color: #666;
        cursor: pointer;

        &.active {
            color: #3872A9;
            font-weight: bold;
        }
    }
}
</style>